{extend name="layout/layout" /}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">
        <h3>签到详情</h3>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="history.back()">返回</button>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">用户信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table">
                            <tbody>
                                <tr>
                                    <td>用户ID</td>
                                    <td>{$detail.user_id|default=''}</td>
                                </tr>
                                <tr>
                                    <td>用户名</td>
                                    <td>{$detail.username|default=''}</td>
                                </tr>
                                <tr>
                                    <td>昵称</td>
                                    <td>{$detail.nickname|default=''}</td>
                                </tr>
                                <tr>
                                    <td>手机号</td>
                                    <td>{$detail.mobile|default=''}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">签到信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table">
                            <tbody>
                                <tr>
                                    <td>签到日期</td>
                                    <td>{$detail.checkin_date|default=''}</td>
                                </tr>
                                <tr>
                                    <td>签到时间</td>
                                    <td>{$detail.checkin_time|default=''}</td>
                                </tr>
                                <tr>
                                    <td>连续签到天数</td>
                                    <td>{$detail.continuous_days|default=0}天</td>
                                </tr>
                                <tr>
                                    <td>获得积分</td>
                                    <td>{$detail.points|default=0}分</td>
                                </tr>
                                <tr>
                                    <td>签到状态</td>
                                    <td>
                                        {if $detail.status == 1}
                                            <span class="layui-badge layui-bg-green">正常</span>
                                        {else/}
                                            <span class="layui-badge">异常</span>
                                        {/if}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-card" style="margin-top: 15px;">
            <div class="layui-card-header">签到历史</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-data="{url:'/admin/checkin/getCheckinHistory', page:true, where:{user_id:'{$detail.user_id}'}}" lay-filter="history-table">
                    <thead>
                        <tr>
                            <th lay-data="{field:'checkin_date', width:120, sort: true}">签到日期</th>
                            <th lay-data="{field:'checkin_time', width:160, sort: true}">签到时间</th>
                            <th lay-data="{field:'continuous_days', width:120, sort: true}">连续天数</th>
                            <th lay-data="{field:'points', width:100, sort: true}">获得积分</th>
                            <th lay-data="{field:'ip', width:150}">IP地址</th>
                            <th lay-data="{field:'device', width:120}">设备类型</th>
                            <th lay-data="{field:'status', width:100, templet:'#status-tpl'}">状态</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 状态模板 -->
<script type="text/html" id="status-tpl">
    {{# if(d.status == 1){ }}
        <span class="layui-badge layui-bg-green">正常</span>
    {{# } else { }}
        <span class="layui-badge">异常</span>
    {{# } }}
</script>
{/block}

{block name="script"}
<script>
layui.use(['table'], function(){
    var table = layui.table;
    
    console.log('签到详情页面已加载');
});
</script>
{/block}